<html>
<head>
	<title>Notifier of Birthday from gmail, facebook, google+, calendar Allow to publish a message or a post for wish a good birthday.</title>
		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	

		<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>

		<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
		
		<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
		
        <script type="text/javascript" src="js/peoplePersistence.js"></script>
        
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		<script type="text/javascript" src="js/googleConnect.js"></script>
		<script type="text/javascript" src="js/googleCalendar.js"></script>

		<script type="text/javascript">

			$(function(){
				$.template( "list", "<li class=\"ui-widget-content\"><span class=\"name\">${prenom} ${nom}</span> <button class=\"email\" data-email=\"${mail}\">Send email</button></li>" );
				$.template( "birthdayAlert", "<p><span class=\"ui-icon ui-icon-info\" style=\"float: left; margin-right: .3em;\"></span><strong>Hey!</strong> It's birthday of ${names} today</p>" );
				// Datepicker
				$('#tabs').tabs({ fx: { opacity: 'toggle' }, selected: 0 });
				$('#datepicker').datepicker({
					inline: true,
					onSelect: function(dateText, inst) {
						displayBirthdayList($('#datepicker').datepicker("getDate"));
					}
				});
				
				$( "#selectable" ).selectable();
				
				$('button').button();

				checkBirthDay();
				displayBirthdayList(new Date());
			});
			
			function displayBirthdayList(date) {
			    $("#date").text($.datepicker.formatDate( "d MM", date));
				$( "#selectable" ).empty();
				var list = peopleFromBirthday($.datepicker.formatDate( "dd/mm", date));
				if (list) {
					$.tmpl( "list", list ).appendTo( "#selectable" );
					$('button.email').button().click(function() {
						console.log(this);
						alert(this.data.email);
					});
				}
			}

			function checkBirthDay(){
				//
				var list = peopleFromBirthday($.datepicker.formatDate( "dd/mm", new Date()));
				console.log(list);
				if (list) {
					var n = "";
					for (i in list) {
						var people = list[i];
						console.log(people);
						n += (n==""?"":" and ") + people.prenom + " " + people.nom;
					}
					$("#info").html($.tmpl( "birthdayAlert", {names:n} )).show("bounce",{},500);
				}
			}
		</script>

		<style type="text/css">

			body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 0; padding: 0;}

			#content { margin: 50px;}
			#datepicker { display: inline-block; }
			#selectable { display: inline-block; }
			#selectable .ui-selecting { background: #FECA40; }
			#selectable .ui-selected { background: #F39814; color: white; }
			#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
			#selectable li { 
				margin: 3px; 
				padding: 0.4em;
				height: 4em;
			}
			#selectable span.name {
				font-weight: bold;
				color: #C77405; 
				font-size: 3em;
			}
			#selectable li button { float: right; }
			
			#birthdayText {
				width: 100%;
				height: 150px;
			}
    
		</style>	

	</head>

	<body>
	<div id="info" class="ui-state-highlight ui-corner-all" style="margin-top: 0px; padding: 0 .7em;with: 100%;display:none;"></div>
	<div id="content">
		<h1>Birthday Notifier</h1>

		<p style="font-size: 1.3em; line-height: 1.5; margin: 1em 0; width: 50%;">Notifier of Birthday from gmail, facebook, google+, calendar Allow to publish a message or a post for wish a good birthday.</p>

			<div id="tabs">
				<ul>
					<li><a href="#tabs-1">Birthdays</a></li>
					<li><a href="#tabs-2">Settings</a></li>
				</ul>
				<div id="tabs-1">
					<h2 id="date"></h2>
					<div id="datepicker"></div>
					<ol id="selectable">
						
					</ol>
				</div>				
				<div id="tabs-2">
					<h2>Authentificate to your google account</h2>
					<button id="auth_button" onclick="loginOrLogout()">Authentificate</button>
					<h2>Text to send for wish birthday</h2>
					<textarea id="birthdayText">
					</textarea>
				</div>
			</div>
		</div>
		<!--<li class="ui-widget-content"><span class="name">John Doe</span> <button class="email">Send email</button><button class="facebook">Post to facebook</button></li>
						<li class="ui-widget-content"><span class="name">John Doe</span> <button class="google">Post to google +</button></li>
						<li class="ui-widget-content"><span class="name">John Doe</span></li>-->
	</body>
</html>